<!DOCTYPE html>
<html lang="<?php echo $lang; ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo $t['siteTitle']; ?></title>
    <meta name="description" content="<?php echo $t['metaDescription']; ?>">
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF85A2',
                        secondary: '#9D8DF1',
                        accent: '#FFD166',
                        light: '#F9F7FF',
                        dark: '#4A4063'
                    },
                    fontFamily: {
                        cute: ['"Comic Sans MS"', '"Bubblegum Sans"', 'cursive']
                    },
                    boxShadow: {
                        'cute': '0 5px 15px rgba(255, 133, 162, 0.2)',
                        'cute-hover': '0 8px 25px rgba(255, 133, 162, 0.3)'
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .text-shadow-cute {
                text-shadow: 2px 2px 0px rgba(255, 210, 102, 0.5);
            }
            .bg-pattern {
                background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffccd5' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
            }
            .character-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .character-card:hover {
                transform: translateY(-10px) rotate(2deg);
            }
            .screenshot-item {
                transition: transform 0.3s ease;
            }
            .screenshot-item:hover {
                transform: scale(1.05) rotate(1deg);
            }
            .btn-cute {
                transition: all 0.3s ease;
            }
            .btn-cute:hover {
                transform: translateY(-3px) scale(1.05);
            }
        }
    </style>
</head>
<body class="bg-light bg-pattern font-cute text-dark">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-light/90 backdrop-blur-sm shadow-sm">
        <div class="container mx-auto px-4 py-3 flex flex-wrap items-center justify-between">
            <!-- 游戏Logo -->
            <a href="#" class="flex items-center gap-2 text-2xl font-bold text-primary">
                <i class="fa fa-gamepad text-accent text-3xl"></i>
                <span><?php echo $t['siteTitle']; ?></span>
            </a>
            
            <!-- 移动端菜单按钮 -->
            <button id="menu-toggle" class="md:hidden text-dark text-2xl">
                <i class="fa fa-bars"></i>
            </button>
            
            <!-- 导航菜单 -->
            <nav id="main-nav" class="hidden w-full md:flex md:w-auto mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row gap-2 md:gap-6">
                    <?php foreach($t['nav'] as $item) : ?>
                        <li>
                            <a href="<?php echo $item['link']; ?>" class="block py-2 px-3 rounded-full 
                                <?php echo isset($item['isCta']) ? 'bg-primary text-white font-bold shadow-cute' : 'text-dark hover:bg-pink-100'; ?>">
                                <?php echo $item['name']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                    
                    <!-- 语言切换 -->
                    <li class="relative group">
                        <a href="#" class="block py-2 px-3 rounded-full hover:bg-pink-100 flex items-center gap-1">
                            <i class="fa fa-globe"></i>
                            <span><?php echo $t['lang'][$lang]; ?></span>
                            <i class="fa fa-chevron-down text-xs"></i>
                        </a>
                        <ul class="absolute right-0 mt-2 w-36 bg-white rounded-lg shadow-cute py-2 hidden group-hover:block">
                            <?php foreach($t['lang'] as $code => $name) : ?>
                                <li>
                                    <a href="?lang=<?php echo $code; ?>" class="block px-4 py-2 hover:bg-pink-100 <?php echo $lang == $code ? 'bg-pink-100 font-bold' : ''; ?>">
                                        <?php echo $name; ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <main>
        <!-- 英雄区域 -->
        <section id="hero" class="relative overflow-hidden py-16 md:py-24">
            <div class="absolute inset-0 bg-gradient-to-br from-purple-100 to-pink-100 z-0"></div>
            <div class="container mx-auto px-4 relative z-10">
                <div class="flex flex-col md:flex-row items-center gap-8 md:gap-16">
                    <div class="w-full md:w-1/2 text-center md:text-left">
                        <h1 class="text-[clamp(2.5rem,5vw,4rem)] font-bold leading-tight text-shadow-cute mb-6">
                            <?php echo $t['hero']['title']; ?>
                        </h1>
                        <p class="text-lg md:text-xl mb-8 text-gray-700 max-w-lg mx-auto md:mx-0">
                            <?php echo $t['hero']['subtitle']; ?>
                        </p>
                        <div class="flex flex-col sm:flex-row gap-4 justify-center md:justify-start">
                            <a href="<?php echo $t['hero']['cta1']['link']; ?>" class="btn-cute bg-primary hover:bg-pink-600 text-white font-bold py-3 px-8 rounded-full shadow-cute text-lg flex items-center justify-center gap-2">
                                <?php echo $t['hero']['cta1']['text']; ?>
                                <i class="fa fa-heart"></i>
                            </a>
                            <a href="<?php echo $t['hero']['cta2']['link']; ?>" class="btn-cute bg-white hover:bg-gray-100 text-secondary font-bold py-3 px-8 rounded-full shadow-cute text-lg flex items-center justify-center gap-2">
                                <i class="fa <?php echo $t['hero']['cta2']['icon']; ?>"></i>
                                <?php echo $t['hero']['cta2']['text']; ?>
                            </a>
                        </div>
                        <p class="mt-6 text-sm text-gray-600 font-bold">
                            <i class="fa fa-calendar text-accent"></i> <?php echo $t['hero']['version']; ?>
                        </p>
                    </div>
                    <div class="w-full md:w-1/2 relative">
                        <div class="relative rounded-3xl overflow-hidden shadow-2xl transform rotate-2 hover:rotate-0 transition-transform duration-500">
                            <img src="https://picsum.photos/id/237/600/500" alt="游戏宣传图" class="w-full h-auto">
                            <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-6">
                                <span class="text-white text-shadow font-bold">✨ <?php echo $t['hero']['version']; ?> ✨</span>
                            </div>
                        </div>
                        <!-- 装饰元素 -->
                        <div class="absolute -top-6 -right-6 w-20 h-20 bg-accent rounded-full opacity-80 animate-pulse"></div>
                        <div class="absolute -bottom-8 -left-8 w-16 h-16 bg-secondary rounded-full opacity-70 animate-pulse" style="animation-delay: 1s"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 游戏特色 -->
        <section id="features" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                        <?php echo $t['features']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['features']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php foreach($t['features']['items'] as $feature) : ?>
                        <div class="bg-light rounded-2xl p-6 shadow-cute hover:shadow-cute-hover transition-all duration-300">
                            <div class="w-14 h-14 bg-primary/10 rounded-full flex items-center justify-center mb-5">
                                <i class="fa <?php echo $feature['icon']; ?> text-2xl text-primary"></i>
                            </div>
                            <h3 class="text-xl font-bold mb-3 text-dark"><?php echo $feature['title']; ?></h3>
                            <p class="text-gray-600"><?php echo $feature['desc']; ?></p>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </section>

        <!-- 角色介绍 -->
        <section id="characters" class="py-16 bg-gradient-to-b from-light to-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-secondary text-shadow">
                        <?php echo $t['characters']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['characters']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <?php foreach($t['characters']['items'] as $character) : ?>
                        <div class="character-card bg-white rounded-3xl overflow-hidden shadow-cute">
                            <div class="relative h-64 overflow-hidden">
                                <img src="<?php echo $character['image']; ?>" alt="<?php echo $character['alt']; ?>" class="w-full h-full object-cover">
                                <div class="absolute top-3 right-3 bg-accent text-dark text-sm font-bold px-3 py-1 rounded-full">
                                    <?php echo $character['class']; ?>
                                </div>
                            </div>
                            <div class="p-5">
                                <h3 class="text-xl font-bold mb-2 text-primary"><?php echo $character['name']; ?></h3>
                                <p class="text-gray-600 text-sm"><?php echo $character['desc']; ?></p>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center gap-2 text-secondary font-bold hover:text-purple-700 transition-colors">
                        <?php echo $t['characters']['moreLink']; ?>
                        <i class="fa fa-arrow-right"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏截图 -->
        <section id="screenshots" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-accent text-shadow">
                        <?php echo $t['screenshots']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['screenshots']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
                    <?php foreach($t['screenshots']['items'] as $screenshot) : ?>
                        <div class="screenshot-item rounded-xl overflow-hidden shadow-cute">
                            <img src="<?php echo $screenshot['image']; ?>" alt="<?php echo $screenshot['alt']; ?>" class="w-full h-48 object-cover">
                        </div>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center gap-2 text-accent font-bold hover:text-yellow-600 transition-colors">
                        <?php echo $t['screenshots']['moreLink']; ?>
                        <i class="fa fa-picture-o"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 游戏预告片 -->
        <section id="trailer" class="py-16 bg-gradient-to-br from-purple-50 to-blue-50">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-secondary text-shadow">
                        <?php echo $t['trailer']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['trailer']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-4xl mx-auto relative rounded-2xl overflow-hidden shadow-2xl group">
                    <img src="<?php echo $t['trailer']['image']; ?>" alt="<?php echo $t['trailer']['alt']; ?>" class="w-full h-auto">
                    <div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-100 group-hover:opacity-100 transition-opacity">
                        <button class="w-20 h-20 md:w-24 md:h-24 bg-primary rounded-full flex items-center justify-center shadow-lg transform group-hover:scale-110 transition-transform">
                            <i class="fa fa-play text-white text-3xl md:text-4xl ml-1"></i>
                        </button>
                    </div>
                    <div class="absolute bottom-4 right-4 bg-black/70 text-white text-sm px-3 py-1 rounded-full flex items-center gap-2">
                        <i class="fa fa-clock-o"></i>
                        <span><?php echo $t['trailer']['duration']; ?></span>
                    </div>
                    <div class="absolute top-4 left-4 bg-accent text-dark text-sm px-3 py-1 rounded-full">
                        <?php echo $t['trailer']['released']; ?>
                    </div>
                </div>
            </div>
        </section>

        <!-- 社区论坛 -->
        <section id="forum" class="py-16 bg-white">
            <div class="container mx-auto px-4">
                <div class="text-center mb-12">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                        <?php echo $t['forum']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['forum']['subtitle']; ?>
                    </p>
                </div>

                <div class="max-w-3xl mx-auto">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <?php foreach($t['forum']['topics'] as $topic) : ?>
                            <div class="bg-light rounded-2xl p-6 shadow-cute hover:shadow-cute-hover transition-all duration-300">
                                <h3 class="text-xl font-bold mb-2 text-secondary"><?php echo $topic['name']; ?></h3>
                                <div class="flex justify-between items-center text-sm text-gray-600">
                                    <span><i class="fa fa-comment-o mr-1"></i> <?php echo $topic['count']; ?> <?php echo $lang == 'zh' ? '个主题' : ($lang == 'ja' ? '件のトピック' : ($lang == 'ko' ? '개의 토픽' : 'topics')); ?></span>
                                    <span><i class="fa fa-clock-o mr-1"></i> <?php echo $topic['lastPost']; ?></span>
                                </div>
                            </div>
                        <?php endforeach; ?>
                    </div>

                    <div class="text-center mt-10">
                        <a href="#" class="btn-cute inline-block bg-secondary hover:bg-purple-600 text-white font-bold py-3 px-8 rounded-full shadow-cute">
                            <?php echo $t['forum']['cta']; ?>
                            <i class="fa fa-comments ml-2"></i>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 最新动态 -->
        <section id="news" class="py-16 bg-light">
            <div class="container mx-auto px-4">
                <div class="text-center mb-16">
                    <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                        <?php echo $t['news']['title']; ?>
                    </h2>
                    <p class="text-gray-600 max-w-2xl mx-auto text-lg">
                        <?php echo $t['news']['subtitle']; ?>
                    </p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                    <?php foreach($t['news']['items'] as $news) : ?>
                        <article class="bg-white rounded-2xl overflow-hidden shadow-cute hover:shadow-cute-hover transition-all duration-300">
                            <div class="h-48 overflow-hidden">
                                <img src="<?php echo $news['image']; ?>" alt="" class="w-full h-full object-cover hover:scale-110 transition-transform duration-500">
                            </div>
                            <div class="p-6">
                                <div class="flex justify-between items-center mb-3 text-sm">
                                    <span class="bg-purple-100 text-secondary px-3 py-1 rounded-full"><?php echo $news['category']; ?></span>
                                    <span class="text-gray-500"><i class="fa fa-calendar-o mr-1"></i> <?php echo $news['date']; ?></span>
                                </div>
                                <h3 class="text-xl font-bold mb-3 text-dark"><?php echo $news['title']; ?></h3>
                                <p class="text-gray-600 text-sm mb-4"><?php echo $news['desc']; ?></p>
                                <a href="#" class="inline-flex items-center text-primary font-bold hover:text-pink-600 transition-colors">
                                    <?php echo $t['readMore']; ?>
                                    <i class="fa fa-arrow-right ml-1"></i>
                                </a>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>

                <div class="text-center mt-12">
                    <a href="#" class="inline-flex items-center gap-2 text-primary font-bold hover:text-pink-600 transition-colors">
                        <?php echo $t['news']['moreLink']; ?>
                        <i class="fa fa-newspaper-o"></i>
                    </a>
                </div>
            </div>
        </section>

        <!-- 预注册 -->
        <section id="pre-register" class="py-16 bg-gradient-to-br from-primary/10 to-secondary/10 relative overflow-hidden">
            <!-- 装饰元素 -->
            <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
                <div class="absolute -top-10 -left-10 w-40 h-40 bg-accent/20 rounded-full"></div>
                <div class="absolute top-1/3 -right-20 w-60 h-60 bg-primary/20 rounded-full"></div>
                <div class="absolute -bottom-20 left-1/4 w-52 h-52 bg-secondary/20 rounded-full"></div>
            </div>

            <div class="container mx-auto px-4 relative z-10">
                <div class="max-w-6xl mx-auto bg-white rounded-3xl shadow-xl overflow-hidden">
                    <div class="flex flex-col md:flex-row">
                        <div class="w-full md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
                            <h2 class="text-[clamp(1.8rem,3vw,2.5rem)] font-bold mb-4 text-primary text-shadow">
                                <?php echo $t['preRegister']['title']; ?>
                            </h2>
                            <p class="text-gray-600 mb-8">
                                <?php echo $t['preRegister']['subtitle']; ?>
                            </p>

                            <form class="space-y-4">
                                <div>
                                    <label for="name" class="block text-sm font-bold text-gray-700 mb-1">
                                        <?php echo $t['preRegister']['form']['name']; ?>
                                    </label>
                                    <input type="text" id="name" placeholder="<?php echo $t['preRegister']['form']['placeholderName']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition">
                                </div>
                                <div>
                                    <label for="phone" class="block text-sm font-bold text-gray-700 mb-1">
                                        <?php echo $t['preRegister']['form']['phone']; ?>
                                    </label>
                                    <input type="tel" id="phone" placeholder="<?php echo $t['preRegister']['form']['placeholderPhone']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition">
                                </div>
                                <div>
                                    <label for="email" class="block text-sm font-bold text-gray-700 mb-1">
                                        <?php echo $t['preRegister']['form']['email']; ?>
                                    </label>
                                    <input type="email" id="email" placeholder="<?php echo $t['preRegister']['form']['placeholderEmail']; ?>" 
                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition">
                                </div>
                                <div class="flex items-start">
                                    <input type="checkbox" id="agreement" class="mt-1">
                                    <label for="agreement" class="ml-2 text-sm text-gray-600">
                                        <?php echo $t['preRegister']['form']['agreement']; ?>
                                    </label>
                                </div>
                                <button type="submit" class="btn-cute w-full bg-primary hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-lg shadow-cute text-lg">
                                    <?php echo $t['preRegister']['form']['submit']; ?>
                                    <i class="fa fa-paper-plane ml-2"></i>
                                </button>
                            </form>

                            <div class="mt-6 bg-yellow-50 border border-yellow-200 rounded-lg p-4 flex items-start">
                                <i class="fa fa-gift text-accent text-xl mt-1 mr-3"></i>
                                <p class="text-sm text-gray-700 font-bold">
                                    <?php echo $t['preRegister']['gift']; ?>
                                </p>
                            </div>
                        </div>

                        <div class="w-full md:w-1/2 bg-gradient-to-br from-secondary to-primary p-8 md:p-12 text-white flex flex-col justify-center">
                            <h3 class="text-2xl font-bold mb-8 text-center">
                                <i class="fa fa-bar-chart mr-2"></i> <?php echo $lang == 'zh' ? '游戏数据' : ($lang == 'ja' ? 'ゲームデータ' : ($lang == 'ko' ? '게임 데이터' : 'Game Stats')); ?>
                            </h3>

                            <div class="grid grid-cols-2 gap-6 text-center">
                                <?php foreach($t['preRegister']['stats'] as $stat) : ?>
                                    <div class="bg-white/10 backdrop-blur-sm rounded-xl p-5">
                                        <div class="text-3xl md:text-4xl font-bold mb-2 text-accent">
                                            <?php echo $stat['value']; ?>
                                        </div>
                                        <div class="text-sm md:text-base">
                                            <?php echo $stat['label']; ?>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>

                            <div class="mt-12">
                                <img src="https://picsum.photos/id/239/400/200" alt="游戏角色" class="w-full h-auto rounded-xl shadow-lg">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-10">
                <div class="md:col-span-1">
                    <div class="flex items-center gap-2 text-2xl font-bold text-accent mb-4">
                        <i class="fa fa-gamepad"></i>
                        <span><?php echo $t['siteTitle']; ?></span>
                    </div>
                    <p class="text-gray-400 mb-6">
                        <?php echo $t['footer']['description']; ?>
                    </p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-facebook"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-instagram"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center hover:bg-primary transition-colors">
                            <i class="fa fa-youtube-play"></i>
                        </a>
                    </div>
                </div>

                <div class="md:col-span-2">
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-8">
                        <?php foreach($t['footer']['links'] as $linkGroup) : ?>
                            <div>
                                <h4 class="text-lg font-bold mb-4 text-accent"><?php echo $linkGroup['title']; ?></h4>
                                <ul class="space-y-2">
                                    <?php foreach($linkGroup['items'] as $item) : ?>
                                        <li>
                                            <a href="<?php echo $item['link']; ?>" class="text-gray-400 hover:text-white transition-colors flex items-center gap-1">
                                                <i class="fa fa-angle-right text-xs"></i>
                                                <?php echo $item['name']; ?>
                                            </a>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        <?php endforeach; ?>
                    </div>
                </div>

                <div class="md:col-span-1">
                    <h4 class="text-lg font-bold mb-4 text-accent"><?php echo $t['footer']['subscribe']; ?></h4>
                    <p class="text-gray-400 mb-4 text-sm">
                        <?php echo $t['footer']['subscribeDesc']; ?>
                    </p>
                    <form class="mb-3">
                        <div class="flex">
                            <input type="email" placeholder="<?php echo $t['footer']['subscribePlaceholder']; ?>" 
                                class="flex-1 px-4 py-2 rounded-l-lg focus:outline-none text-dark">
                            <button type="submit" class="bg-primary hover:bg-pink-600 px-4 py-2 rounded-r-lg transition-colors">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </form>
                    <p class="text-gray-500 text-xs">
                        <?php echo $t['footer']['privacyNote']; ?>
                    </p>
                </div>
            </div>

            <div class="border-t border-gray-800 pt-6">
                <div class="flex flex-col md:flex-row justify-between items-center">
                    <p class="text-gray-500 text-sm mb-4 md:mb-0">
                        <?php echo $t['footer']['copyright']; ?>
                    </p>
                    <div class="flex gap-4 text-sm">
                        <?php foreach($t['footer']['legalLinks'] as $link) : ?>
                            <a href="<?php echo $link['link']; ?>" class="text-gray-500 hover:text-white transition-colors">
                                <?php echo $link['name']; ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script>
        // 移动端菜单切换
        document.getElementById('menu-toggle').addEventListener('click', function() {
            const nav = document.getElementById('main-nav');
            nav.classList.toggle('hidden');
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                if (targetId === '#') return;
                
                const targetElement = document.querySelector(targetId);
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // 关闭移动端菜单
                    document.getElementById('main-nav').classList.add('hidden');
                }
            });
        });

        // 滚动时导航栏样式变化
        window.addEventListener('scroll', function() {
            const header = document.querySelector('header');
            if (window.scrollY > 50) {
                header.classList.add('py-2', 'shadow');
                header.classList.remove('py-3');
            } else {
                header.classList.add('py-3');
                header.classList.remove('py-2', 'shadow');
            }
        });
    </script>
</body>
</html>
